<template>
<a-card class="container">
  <div class="left">
  <el-input
  type="textarea"
  placeholder="请输入内容"
  v-model="textarea"
  maxlength="60"
  show-word-limit
>
</el-input>
</div>
<div class="right">
 <div class="block">
  <div class="radio">
    排序：
    <el-radio-group v-model="reverse">
      <el-radio :label="true">倒序</el-radio>
      <el-radio :label="false">正序</el-radio>
    </el-radio-group>
  </div>

  <el-timeline :reverse="reverse">
    <el-timeline-item
      v-for="(activity, index) in activities"
      :key="index"
      :timestamp="activity.timestamp">
      {{activity.content}}
    </el-timeline-item>
  </el-timeline>
</div>
</div>
</a-card>
</template>

<script>
export default {
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'normal_jianlitree' });
  },
  data() {
      return {
        reverse: true,
        activities: [{
          content: '百度业务员',
          timestamp: '2016-02'
        }, {
          content: '张专家评价：优秀紫光公司业务员',
          timestamp: '2015-07'
        }, {
          content: '北大毕业',
          timestamp: '2014-07'
        },
        {
          content: '清华附中',
          timestamp: '2010-07'
        }
    ],
        textarea:''
      };
    }
};
</script>
<style>
.container{
  width: 800px;
  margin: 100px auto 0 !important;
  background-color: rgb(149, 208, 231)!important;
  height: 305px;
}
.container .left  textarea{
  height: 200px;
  width: 300px;
  margin-right: 510px;
  margin-top: 9px;
}
.container .left span{
  margin-right: 447px;

}
.container .right .block{
    margin-left: 431px;
    width: 324px;
    margin-top: -223px;
}
</style>

